<template>
  <div>
    <h3>遍历数组</h3>
    <ul>
      <li v-for="(item, index) in persons" :key="personKeys[index]">
        id:{{ personKeys[index] }}---{{ index }} )姓名： {{ item.name }},年龄:
        {{ item.age }}, 性别：{{ item.age }}
      </li>
    </ul>
    <h3>遍历对象</h3>
    <ul>
      <li v-for="(items, key) in persons[0]" :key="key">
        {{ key }} -------{{ items }}
      </li>
    </ul>
  </div>
</template>

<script>
import shortId from 'shortid'
export default {
  data() {
    return {
      persons: [
        { name: '张三', age: 18, sex: '男' },
        { name: '李四', age: 28, sex: '男' },
        { name: '王五', age: 38, sex: '女' },
        { name: '赵六', age: 58, sex: '女' }
      ],
      // 为每一项动态生成唯一的 key
      personKeys: []
    }
  },
  created() {
    this.personKeys = this.persons.map(v => shortId.generate())
  }
}
</script>

<style scoped>
ul {
  list-style: none;
}
</style>
